import type { G6GraphEvent } from '@antv/g6';
export default function (G6: any) {
	G6.registerBehavior('click-add-node', {
		// Set the events and the corresponding responsing function for this behavior
		getEvents() {
			// The event is canvas:click, the responsing function is onClick
			return {
				'canvas:click': 'onClick',
			};
		},
		// 点击添加节点
		onClick(ev: G6GraphEvent) {
			// const self = this;
			const graph = this.graph;
			// 弹窗填写端类型等字段后再添加节点
			// Add a new node
			graph.addItem('node', {
				x: ev.x,
				y: ev.y,
				// id: `node-${addedCount}`, // Generate the unique id
				id: ev.id,
			});
		},
	});

	G6.registerBehavior('activate-node', {
		getDefaultCfg() {
			return {
				multiple: true,
			};
		},
		getEvents() {
			return {
				// 鼠标左键单击节点时触发
				'node:click': 'onNodeClick',
				// 鼠标移入节点上方时触发
				'node:mouseover': 'onMouseover',
				'node:mouseleave': 'onMouseleave',
			};
		},
		// 鼠标移入节点上方时触发
		onMouseover(e: any) {
			const item = e.item;
			// 设置节点为激活状态
			this.updateItemState(item, 'active', true);
			// 显示左右锚点图形
			this.updateNodePointVisibility(item, true);
			// 显示边动画
			const edges = item.getEdges();
			edges.forEach((edge: any) => this.graph.setItemState(edge, 'running', true));
		},
		// 鼠标移出节点时触发
		onMouseleave(e: any) {
			const item = e.item;
			// 显示左右锚点图形
			this.updateNodePointVisibility(item, false);
			// 如果节点为激活状态且不为选中状态，移除节点激活状态
			if (item.hasState('active') && !item.hasState('selected')) {
				this.graph.clearItemStates(item, 'active');
			}
			// 关闭边动画
			const edges = item.getEdges();
			edges.forEach((edge: any) => this.graph.setItemState(edge, 'running', false));
		},
		// 鼠标左键单击节点时触发
		onNodeClick(e: any) {
			const item = e.item;
			const statNames = ['selected', 'active'];
			// 显示左右锚点图形
			this.updateNodePointVisibility(item, true);
			// 如果节点是选中状态，则移除选中与鼠标移入状态
			if (item.hasState('selected')) {
				this.graph.clearItemStates(item, statNames);
				return;
			}
			// 先移除其他节点的 'selected', 'active' 状态
			this.removeNodesState(statNames);
			// 设置点击的节点状态 'selected' 为 true
			this.updateItemState(item, 'selected', true);
		},
		// 取消所有节点的状态
		removeNodesState(stateNames: any[]) {
			for (let i = 0; i < stateNames.length; i++) {
				this.graph.findAllByState('node', stateNames[i]).forEach((node: any) => {
					this.graph.clearItemStates(node, stateNames[i]);
				});
			}
		},
		// 更改节点状态
		updateItemState(obj: any, stateName: any, flags: any) {
			this.graph.setItemState(obj, stateName, flags);
		},
		// 显示左右锚点图形
		updateNodePointVisibility(item: any, flags: any) {
			const group = item.getContainer();
			const childrens = group.get('children');
			const leftCircleShape = childrens[childrens.length - 2];
			const rightCircleShape = childrens[childrens.length - 1];
			if (flags) {
				leftCircleShape.show();
				rightCircleShape.show();
			} else {
				leftCircleShape.hide();
				rightCircleShape.hide();
			}
		},
	});

	G6.registerBehavior('show-node', {
		getDefaultCfg() {
			return {
				multiple: true,
			};
		},
		getEvents() {
			return {
				// 鼠标左键单击节点时触发
				'node:click': 'onNodeClick',
				// 鼠标移入节点上方时触发
				'node:mouseover': 'onMouseover',
				'node:mouseleave': 'onMouseleave',
			};
		},
		// 鼠标移入节点上方时触发
		onMouseover(e: any) {
			const item = e.item;
			// 设置节点为激活状态
			this.updateItemState(item, 'active', true);
			// 显示边动画
			const edges = item.getEdges();
			edges.forEach((edge: any) => this.graph.setItemState(edge, 'running', true));
		},
		// 鼠标移出节点时触发
		onMouseleave(e: any) {
			const item = e.item;
			// 如果节点为激活状态且不为选中状态，移除节点激活状态
			if (item.hasState('active') && !item.hasState('selected')) {
				this.graph.clearItemStates(item, 'active');
			}
			// 关闭边动画
			const edges = item.getEdges();
			edges.forEach((edge: any) => this.graph.setItemState(edge, 'running', false));
		},
		// 鼠标左键单击节点时触发
		onNodeClick(e: any) {
			const item = e.item;
			const statNames = ['selected', 'active'];
			// 如果节点是选中状态，则移除选中与鼠标移入状态
			if (item.hasState('selected')) {
				this.graph.clearItemStates(item, statNames);
				return;
			}
			// 先移除其他节点的 'selected', 'active' 状态
			this.removeNodesState(statNames);
			// 设置点击的节点状态 'selected' 为 true
			this.updateItemState(item, 'selected', true);
		},
		// 取消所有节点的状态
		removeNodesState(stateNames: any) {
			for (let i = 0; i < stateNames.length; i++) {
				this.graph.findAllByState('node', stateNames[i]).forEach((node: any) => {
					this.graph.clearItemStates(node, stateNames[i]);
				});
			}
		},
		// 更改节点状态
		updateItemState(obj: any, stateName: any, flags: any) {
			this.graph.setItemState(obj, stateName, flags);
		},
	});
}
